<template>
  <div class="edit-photo">
    <!-- 图片 -->
    <img :src="imgSrc" ref="img"  alt="">
    <!-- 工具条 -->
    <div class="tool-bar">
      <span @click="$emit('close')">取消</span>
      <span @click="submit">确定</span>
    </div>
  </div>
</template>

<script>
// 1 安装 npm i cropperjs
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';
import { updateUserPhoto } from '@/api/user'
  export default {
     name:'EditPhoto',
     props: {
      //  图片地址
       imgSrc: {
         type: String,
         require:true
       },
       value:String
     },
     data() {
       return {
         cropper: null
       }
     },
      //  在挂载完成之后调用插件
     mounted(){
      // 2.实例化插件 new Cropper(图片节点，{配置对象})
      this.cropper = new Cropper(this.$refs.img, {
        viewMode: 1,  // 限制裁切框不要超过画布的大小
        dragMode: 'move',  // 移动画布
        aspectRatio: 1,   // 定义裁剪框的固定长宽比
        autoCropArea: 1,   // 0到1之间的数字。定义自动裁剪区域的大小（百分比）
        cropBoxMovable: false,  // 启用通过拖动来移动裁剪框的功能。
        cropBoxResizable: false,  // 启用以通过拖动来调整裁剪框的大小。
        background: false,
        movable: true
      });
     },
     methods: {
       submit() {
         this.$toast.loading({
           message:'上传中',
           duration:0
         })
         this.cropper.getCroppedCanvas().toBlob(async (blob) => {
          //  console.log(blob);  // 文件信息
          // 提交给后台
          // 1. 处理成FormData类型数据
          let fd = new FormData()
          fd.append('photo',blob)
          try {
            // 2. 发送请求
            const {data:res} = await updateUserPhoto(fd)
            this.$toast.success('更新成功')
            this.$emit('input',res.data.photo)
            this.$emit('close')
          } catch (error) {
            console.log(error);
            this.$toast.fail('更新失败')
          }
         })
       }
     },
  }
</script>

<style lang="less" scoped>
.edit-photo{
  width: 100vw;
  height: 100vh;
  background-color: #000;
  .tool-bar{
    height: 80px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    span{
      color: #fff;
      display: inline-block;
      width: 160px;
      text-align:center;
      line-height: 80px;
      font-size: 32px;
    }
  }
  img {
    display: block;
    max-width: 100%;
  }
}
</style>